<template>
	<div class="cartcontrol">
        <div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click.stop.prevent="decreaseCart"></div>
		<div class="cart-count" v-show="food.count>0">{{ food.count }}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
	</div>
</template>

<script type="text/javascript">

import Vue from 'vue'

export default{
    props: ['food'],
    created(){  // 初始化
        console.log(this.food)
    },
    methods: {
        addCart(event){
            if( !event._constructed ){
                return     // 判断是原生的click事件还是BScroll派发的click事件，如果是原生的事件就执行返回 不然click在pc端会重复
            }

            if(!this.food.count){
                Vue.set(this.food, 'count', 1)
            }else{
                this.food.count++
            }
            // this.$dispatch('cart.add', event.target)  // 购物车小球预留动画
        },
        decreaseCart(event){
            if( !event._constructed ){
                return     // 判断是原生的click事件还是BScroll派发的click事件，如果是原生的事件就执行返回 不然click在pc端会重复
            }   
            
            if(this.food.count){
                this.food.count--
            }
        }
    }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
border-1px($color)
  position: relative
  &:after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    display: block
    width: 100%
    border-top: 1px solid $color
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")
.clearfix
    display: inline-block
    &:after
        display: block
        content: '.'
        height: 0
        line-height: 0
        clear: both
        visibility: hidden
border-none()
	&:after
		display none	

.cartcontrol
    font-size 0
    .cart-decrease,.cart-add
        display inline-block
        width 12px
        height 12px
        padding 6px
        line-height 24px
        font-size 24px
        color rgb(0,160,220)
        background-size 22px 22px
        background-repeat no-repeat
    .cart-count
        display inline-block
        vertical-align top
        width 26px
        line-height 24px
        text-align center
        font-size 10px
        color rgb(147,153,159)
    .cart-decrease
        background-image url('./jian.png')
    .cart-add
        background-image url('./jia.png')




</style>